{% extends 'public/header.html' %}

{% block head %}
    {{ super() }} <!-- 保留此行，确保继承父模板的头部内容 -->
    		<link rel="stylesheet" href="public/css/ai_writing.css"><!-- 新增 CSS 引用 -->
{% endblock %}
{% block content %}
<div class="ai-writing-container">
    <div class="ai-writing-wrapper">
        <h2 class="ai-title">AI智能写作助手</h2>
        <div class="ai-input-area">
            <div class="topic-input">
                <label for="writing-topic">请输入写作主题:</label>
                <input type="text" id="writing-topic" placeholder="例如：人工智能的发展与未来" class="form-control">
            </div>
            
            <div class="style-selection">
                <label>选择文章风格:</label>
                <div class="style-options">
                    <button class="style-btn active" data-style="academic">学术论文</button>
                    <button class="style-btn" data-style="blog">博客随笔</button>
                    <button class="style-btn" data-style="news">新闻报道</button>
                    <button class="style-btn" data-style="story">故事叙述</button>
                </div>
            </div>
            
            <div class="length-selection">
                <label>文章长度:</label>
                <select id="article-length" class="form-control">
                    <option value="short">短文(500字左右)</option>
                    <option value="medium" selected>中等(1000字左右)</option>
                    <option value="long">长文(2000字以上)</option>
                </select>
            </div>
            
            <button id="generate-btn" class="generate-btn">开始生成</button>
        </div>
        
        <div class="ai-output-area">
            <div class="output-header">
                <h3>生成结果</h3>
                <button id="copy-btn" class="copy-btn" disabled>复制文本</button>
            </div>
            <div class="loading-indicator" style="display: none;">
                <div class="spinner"></div>
                <p>AI正在思考并创作中，请稍候...</p>
            </div>
            <div id="output-content" class="output-content">
                <p class="placeholder-text">您的AI生成内容将显示在这里...</p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const generateBtn = document.getElementById('generate-btn');
    const copyBtn = document.getElementById('copy-btn');
    const outputContent = document.getElementById('output-content');
    const topicInput = document.getElementById('writing-topic');
    const loadingIndicator = document.querySelector('.loading-indicator');
    const styleBtns = document.querySelectorAll('.style-btn');
    
    // 风格按钮点击事件
    styleBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            styleBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });
    
  

    // 统计字数的函数
    const countWords = (text) => {
    // 这里统计的是“词数”，如果想统计“字数”，可以用 text.replace(/\\s/g, '').length
        return text.replace(/\s/g, '').length;
};
    // 生成按钮点击事件
    generateBtn.addEventListener('click', function() {
        const topic = topicInput.value.trim();
        if (!topic) {
            alert('请输入写作主题！');
            return;
        }
        
        // 获取选中的风格
        const selectedStyle = document.querySelector('.style-btn.active').dataset.style;
        // 获取选中的长度
        const selectedLength = document.getElementById('article-length').value;
        
        // 显示加载动画
        loadingIndicator.style.display = 'flex';
        outputContent.style.display = 'none';
        copyBtn.disabled = true;
        
        // 发送请求到后端
        fetch('/ai_generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                topic: topic,
                style: selectedStyle,
                length: selectedLength
            })
        })
        .then(response => response.json())
        .then(data => {
            // 隐藏加载动画
            loadingIndicator.style.display = 'none';
            outputContent.style.display = 'block';
            
            if (data.success) {
                const content = data.content.replace(/\\n/g, '<br>');
               const wordCount = countWords(data.content);
               outputContent.innerHTML = `
                <div class="word-count">字数统计: 约${wordCount}字</div>
                <div class="content-body">${content}</div>
            `;
            copyBtn.disabled = false;

            } else {
                outputContent.innerHTML = `<p class="error-text">生成失败: ${data.message}</p>`;
            }
        })
        .catch(error => {
            loadingIndicator.style.display = 'none';
            outputContent.style.display = 'block';
            outputContent.innerHTML = '<p class="error-text">请求出错，请稍后重试</p>';
            console.error('Error:', error);
        });
    });
    
    // 复制按钮点击事件
    copyBtn.addEventListener('click', function() {
        const textToCopy = outputContent.innerText;
        navigator.clipboard.writeText(textToCopy)
            .then(() => {
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '已复制!';
                setTimeout(() => {
                    copyBtn.textContent = originalText;
                }, 2000);
            })
            .catch(err => {
                console.error('复制失败:', err);
            });
    });
});
</script>
/* 基础布局样式 */
<style>
.ai-writing-container {
    max-width: 1000px;
    margin: 30px auto;
    padding: 25px;
    font-family: 'Microsoft YaHei', 'SimSun', sans-serif; /* 系统默认中文字体 */
}

.ai-writing-wrapper {
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 30px;
}

/* 标题样式 */
.ai-title {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

/* 输入区域样式 */
.ai-input-area {
    margin-bottom: 30px;
}

.topic-input,
.style-selection,
.length-selection {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* 风格选择按钮样式 */
.style-options {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.style-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #ecf0f1;
    color: #34495e;
    transition: all 0.3s;
}

.style-btn.active,
.style-btn:hover {
    background: #3498db;
    color: white;
}

/* 长度选择下拉框样式 */
#article-length {
    width: 200px;
}

/* 生成按钮样式 */
.generate-btn {
    width: 100%;
    padding: 12px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.generate-btn:hover {
    background: #2ecc71;
}

/* 输出区域样式 */
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.copy-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
}

.copy-btn:hover {
    background: #f5f5f5;
}

.loading-indicator {
    text-align: center;
    margin: 30px 0;
    color: #7f8c8d;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

/* 内容显示区域 */
.output-content {
    line-height: 1.6;
    color: #555;
}

.placeholder-text {
    color: #95a5a6;
    font-style: italic;
}

.error-text {
    color: #e74c3c;
    margin: 10px 0;
}

.word-count {
    margin-bottom: 15px;
    color: #7f8c8d;
    font-size: 0.9em;
    text-align: right;
}

/* 动画样式 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .ai-writing-container {
        padding: 15px;
    }

    .style-options {
        flex-direction: column;
        gap: 8px;
    }
}
</style>
{% endblock %}
